<template>
	<view class="container">
		<view class="product-image">
			<image :src="productDetails.productImageUrl" mode="aspectFill"></image>
		</view>
		<view class="product-info">
			<text class="price">¥{{ productDetails.retailPrice }}</text><br>
			<text class="product-name">{{ productDetails.productName }}</text>
		</view>
		<view class="store-selection">
			<view class="line">{{productDetails.warehouseName}}({{productDetails.storeName}})</view>
			<view class="line">{{productDetails.storeAddress}}</view>
		</view>
		<view class="options">
			<view>
				{{productDetails.specificationTypeName1}}<br> <span
					class="s1">{{productDetails.specificationName1}}</span>
			</view>

			<view>
				{{productDetails.specificationTypeName2}}<br> <span
					class="s1">{{productDetails.specificationName2}}</span>
			</view>
			<view>单位<br><span class="s1">{{ productDetails.unitName }}</span></view>

		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const productDetails = ref({}); // 初始化为空对象

	// 获取页面参数中的 productId
	onLoad((options) => {
		const productId = options.productId; // 从页面参数中获取 productId
		if (!productId) {
			uni.showToast({
				title: "商品信息加载失败",
				icon: "none"
			});
			return;
		}
		

			function loadData() {
				// 你的数据加载逻辑
				console.log('数据已刷新');
			}
			

		// 请求商品详情
		const app = getApp();
		const url = app.globalData.url;
		uni.request({
			url: `${url}PRODUCT-SERVICE/product/selectByIdWx?productId=${productId}`,
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					productDetails.value = res.data; // 使用 ref 的 value 属性赋值
					console.log(productDetails.value);
				} else {
					uni.showToast({
						title: "加载失败",
						icon: "none"
					});
				}
			},
			fail: () => {
				uni.showToast({
					title: "网络请求错误",
					icon: "none"
				});
			}
		});
	});
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
		height: 700px;

	}

	.product-image {
		width: 100%;
		margin-bottom: 20px;
	}

	.product-image image {
		width: 100%;
		height: 200px;
		border-radius: 10px;
		background-color: #b0d0ff;
	}

	.product-info {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.price {
		font-size: 24px;
		color: #ff4d4f;
		margin-bottom: 5px;
	}

	.product-name {
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	.store-selection {
		width: 350px;
		height: 60px;
		border-radius: 10px;
		background-color: white;
		margin-bottom: 10px;
	}

	.store-selection view {


		font-size: 13px;
		margin-top: 15px;
		margin-left: 10px;
	}

	.options {
		display: flex;
		justify-content: space-around;
		color: black;
		font-size: 14px;
		width: 350px;
		height: 60px;
		border-radius: 10px;
		background-color: white;
		margin-bottom: 10px;
	}

	.options view {
		margin-top: 5px;
	}

	.s1 {
		color: #c7c2cb;
	}

	.button-container {
		display: flex;
	}

	.button {
		padding: 10px 20px;
		border: none;
		border-radius: 20px;
		color: white;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;

	}

	.add-to-cart {
		background: linear-gradient(to right, #a0c4ff, #b0d0ff);
		border-radius: 50px 0px 0px 50px;
		margin-top: 100px;
		width: 200px;
	}

	.buy-now {
		background: linear-gradient(to right, #007bff, #0056b3);
		border-radius: 0px 50px 50px 0px;
		margin-top: 100px;
		width: 200px;
	}

	.add-to-cart:hover {
		background: linear-gradient(to right, #b0d0ff, #a0c4ff);
	}

	.buy-now:hover {
		background: linear-gradient(to right, #0056b3, #007bff);
	}
</style>